{% extends 'lay_out/basic.html' %}
{% block title %}用户登录{% endblock %}

{% block css %}
<style>
    .account{
        width: 400px;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #f0f0f0;
        padding: 10px 30px 30px 30px;
        -webkit-box-shadow: 5px 10px 10px rgba(0,0,0,.05);
        box-shadow: 5px 10px 10px rgba(0,0,0,.05);
    }
    .account .title {
        font-size :25px;
        font-weight: bold;
        text-align: center;
    }
    .account .form-group{
        margin-bottom: 20px;
    }
    .error-msg{
        color: red;
        position: absolute; /*错误定位*/
    }
</style>

{% endblock %}

{% block content %}

<div class="account">
    <div class="title">用户登录</div>
    <form id="smsForm" method="POST" novalidate>
    {% csrf_token %}
    {% for field in form %}
        {% if field.name == 'code' %}
            <div class="form-group">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                <div class="clearfix">
                            <div class="col-md-6" style="padding-left: 0;">{{ field }}
                                <span class="error-msg">{{ field.errors.0 }}</span>
                            </div>
                            <div class="col-md-5">
                                <img src="{% url 'image_code' %}" id="imageCode" title="点击更换图片">
                            </div>
                </div>
            </div>
        {% else %}
            <div class="form-group">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
            <span class="error-msg">{{ field.errors.0 }}</span>
        </div>
            {% endif %}
        {% endfor %}
    <div class="checkbox">
        <div style="float: right">
            <a href="{% url 'login_sms' %}">短信验证码登陆</a>
    </div>
    </div>
    <div class="row">
        <div class="col-xs-3">
            <input type="submit" class="btn btn-primary" value="登 录"/>
        </div>
    </div>

    </form>

</div>
{% endblock %}

{% block js %}

    <script>
        $(function () {
            $('#imageCode').click(function () {
                //获取图片验证码原来地址
                var oldSrc = $(this).attr('src');
                //更换src
                $(this).attr('src',oldSrc+'?'); //相当于再次请求形成新地址

            })
        })
    </script>

{% endblock %}